<script setup lang="ts">
import UserInfo from "@/app/connect/views/leftControl/modules/userInfo.vue";
import Control from "@/app/connect/views/leftControl/modules/control.vue";
import Func from './modules/func.vue'
import Session from './modules/session.vue'
import Group from './modules/contacts.vue'
import {ref} from "vue";

let currentTab = ref<string>('Session')
const controlChange = (key: string) => {
  currentTab.value = key
}
</script>
<template>
  <div class="left-control">
    <UserInfo  @change="controlChange"></UserInfo>
    <div class="function-board">
      <Session v-show="currentTab ==='Session'"></Session>
      <Func v-show="currentTab ==='Func'"></Func>
      <Group v-show="currentTab ==='Contacts'"></Group>
    </div>
  </div>
</template>
<style lang="less" scoped>
.left-control {
  height: 100%;
  .function-board {
    border-top: 1px solid #D9D9D9;
    height: calc(100% - 70px - 60px);
    width: 240px;
  }
}

</style>
